<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>农技视频二级</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">

</head>

<body>
    <!-- header -->
    <div class="yang">
        <div class="widget-default margin-b-5">
            <div class="farming-tab">
                <div class="index-scroll margin-b-3">
                    <div
                        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll" id="typeList">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top: 51px;">
            <div class="mui-scroll">
                <div id="contentList">
                </div>
            </div>
        </div>

    </div>

    <!-- <div class="hobby-footer1 bg-transparent">
        <div class="display-flex align-items-center bot-issue" id="imgpop">
            <img class="issue-img" src="../img/issue.png" alt="">
        </div>
    </div> -->

    <div id="topProp" class="topProp"></div>
    <div class="propbottom">
        <div class="display-flex align-items-center justify-content-around widget-default padding-t-15 padding-b-15">
            <div class="display-flex flex-column align-items-center" id="leftProp">
                <img class="issue-img" src="../img/farm-video.png" alt="">
                <span class="font-17 blue1">农技视频</span>
            </div>
            <div class="display-flex flex-column align-items-center" id="rightProp">
                <img class="issue-img" src="../img/little-video.png" alt="">
                <span class="font-17 blue1">小视频</span>
            </div>
        </div>
    </div>

    <script src="../js/dsbridge.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/mui/mui.js"></script>
    <script src="../js/mui/mui.picker.min.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/app/app-base.js"></script>
    <script src="../js/app/app-url.js"></script>
    <script src="../js/app/app-ajax.js"></script>

    <script>
        var page = 1;
        var limit = 10;
        var index = 0;
        var all_data = new Array();
       
        //页面类型 AGRT_TECH_VIDEO-农技视频 SMALL_VIDEO-小视频
        var sourceType = localStorage.getItem("video-list-type");
        //三级分类code
        var thirdTypeCode = localStorage.getItem("video-list-thirdTypeCode");
        //点赞数据index
        var praiseIndex = -1;
        //分享数据index
        var shareIndex = -1;
        $(document).ready(function () {
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        auto: true, // 首次进入自动加载
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
            //获取视频类型
            getVideoType();
        })


        //三级类型切换
        mui("#typeList").on('tap', '.thirdType', function () {
            thirdTypeCode = $(this).attr("code");
            pulldownRefresh();
        });

        //获取视频类型
        function getVideoType() {
            var data = {
                pCode:localStorage.getItem("video-list-secondTypeCode")
            }
            getServerData(url_businessdatamng_queryList, data);
        }

        /**
         * 下拉刷新具体业务实现
         */
        function pulldownRefresh() {
            page = 1;
            var data = {
                sourceType: sourceType,
                userAccId: getUserId(),
                labelTypeCode: thirdTypeCode,
                page: page,
                limit: limit
            }
            getServerData(url_agrivideoInfo_queryList, data);
        }

        /**
         * 上拉加载具体业务实现
         */
        function pullupRefresh() {
            page++;
            var data = {
                sourceType: sourceType,
                userAccId: getUserId(),
                labelTypeCode: thirdTypeCode,
                page: page,
                limit: limit
            }
            getServerData(url_agrivideoInfo_queryList, data);
        }

        function getServerDataSuccess(url, data) {
            switch (url) {
                case url_businessdatamng_queryList:
                    var data = data.data;
                    var h5 = '';
                    if(data != null && data.length > 0){
                        $.each(data,function(index,item){
                            h5 += '<a class="thirdType mui-control-item '+(item.code == thirdTypeCode ? "mui-active" : "")+'" code="'+item.code+'">'+item.name+'</a>';
                        })
                    }
                    $("#typeList").html(h5);
                    break;
                case url_agrivideoInfo_queryList:
                    var list = data.data;
                    if (page == 1) {
                        index = 0;
                        all_data.length = 0;
                    }
                    var h5 = '';
                    if (list != null && list.length > 0) {
                        if (sourceType != 'SMALL_VIDEO') {
                            $.each(list, function (sindex, item) {
                                all_data.push(item);
                                h5 +=
                                    '<div class="widget-body widget-default margin-b-5 padding-t-158 " id="' +
                                    index + '" >' +
                                    '<div class="display-flex padding-b-10">' +
                                    '<img class="farm-head" src="' + (isEmpty(item.headPortrait) ?
                                        "../img/headimg.png" : showSmallImg(item.headPortrait)) + '" alt="" userAccId="'+item.userAccId+'">' +
                                    '<div class="display-flex flex-column justify-content-between margin-l-10">' +
                                    '<span class="elli1 font-weight black font-16 font-weight no-margin">' +
                                    item
                                    .userName + '</span><span class="gray font-12">' + item.createTime
                                    .substring(0,
                                        10) + '</span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<div class="margin-t-5 trade-list videoDetail" dId="'+index+'">' +
                                    '<div class="position-open1"><img class="open-img" src="../img/open.png" alt=""></div>' +
                                    '<div class="height177 width-100"><img class="height177 width-100" src="' +
                                    showSmallImg(item.coverImg) + '" alt=""></div>' +
                                    '<p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">' + item
                                    .title + '</p>' +
                                    '</div>' +

                                    '<div class="display-flex justify-content-end align-items-center padding-t-6">' +
                                    '<img class="farm-icon evalOper" src="../img/new-expert/info.png" alt="">' +
                                    '<span class="gray font-12 padding-l-5 padding-r-10 evalOper">' + item
                                    .evaluationNum +
                                    '</span>' +
                                    '<img class="farm-icon shareOper" src="../img/new-expert/share.png" alt="">' +
                                    '<span class="gray font-12 padding-l-5 padding-r-10 shareOper">' + item
                                    .shareNum + '</span>' +
                                    '<img class="farm-icon praiseOper praiseImg" src="' + (item.isPraise == 1 ?
                                        "../img/applaud.png" : "../img/zai.png") + '" alt="">' +
                                    '<span class="gray font-12 padding-l-5 praiseOper praiseNum">' + item
                                    .praiseNum + '</span>' +
                                    '</div>' +
                                    '</div>';
                                index++;
                            })
                        } else {
                            h5 += '<div class="display-flex flex-warp">';
                            $.each(list, function (sindex, item) {
                                all_data.push(item);
                                h5 += '<div class="littlevideo-box videoDetail" id="' + index + '" dId="'+index+'">' +
                                    '<img src="' + showSmallImg(item.coverImg) +
                                    '" alt="" class="littlevideo-img">' +
                                    '<div class="littlevideo-shade">' +
                                    '<p class="elli2 white font-12">' + item.title + '</p>' +
                                    '<p class="white font-12">' + item.pageViewNum +
                                    '次<span class="padding-l-10">播放</span></p>' +
                                    '</div>' +
                                    '</div>';
                                index++;
                            })
                            h5 += '</div>';
                        }
                    }
                    if (page == 1) {
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                        if (list.length > 0) {
                            mui('#pullrefresh').pullRefresh().refresh(true);
                        }
                        $("#contentList").html(h5);
                    } else {
                        $("#contentList").append(h5);
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(list.length != limit);
                    }
                    break;
                case url_commonoper_operAction + '?type=praise':
                    $(".widget-body[id='" + praiseIndex + "']").find(".praiseImg").attr("src", "../img/applaud.png");
                    var $praiseNum = $(".widget-body[id='" + praiseIndex + "']").find(".praiseNum");
                    var praiseNum = Number($praiseNum.text()) + 1;
                    $praiseNum.text(praiseNum);
                    break;
                case url_oper_action_cancel + '?type=praise':
                    //取消点赞
                    $(".widget-body[id='" + praiseIndex + "']").find(".praiseImg").attr("src", "../img/zai.png");
                    var $praiseNum = $(".widget-body[id='" + praiseIndex + "']").find(".praiseNum");
                    var praiseNum = Number($praiseNum.text()) - 1;
                    if (praiseNum < 0) {
                        praiseNum = 0;
                    }
                    $praiseNum.text(praiseNum);
                    break;
            }
        }

        function getServerDataFailed(url, data) {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
        }

        //去个人主页
        mui(".yang").on('tap', '.farm-head', function () {
            var publishUserAccId = $(this).attr("userAccId");
            dsBridge.call("toPersonHomePage",publishUserAccId);
        });

        //详情
        mui("#contentList").on('tap', '.videoDetail', function () {
            var detailIndex = $(this).attr("dId");
            if (all_data[detailIndex].type == 'AGRT_TECH_VIDEO') {
                //农技视频
                localStorage.setItem("video-detail-id",all_data[detailIndex].id);
                dsBridge.call("goAgriTechVideoDetail","");
            } else if (all_data[detailIndex].type == 'SMALL_VIDEO') {
                //小视频
                dsBridge.call("smallVideo", all_data[detailIndex].id);
            }
        });
        //评论
        mui("#contentList").on('tap', '.evalOper', function () {
            var evalIndex = $(this).parents(".widget-body").attr("id");
            localStorage.setItem("comment-object-id", all_data[evalIndex].id);
            dsBridge.call("goEvalOper");
        });
        //分享
        mui("#contentList").on('tap', '.shareOper', function () {
            shareIndex = $(this).parents(".widget-body").attr("id");
            dsBridge.call("share",all_data[shareIndex]);
        });

        //点赞/取消点赞
        mui("#contentList").on('tap', '.praiseOper', function () {
            event.stopPropagation();
            praiseIndex = $(this).parents(".widget-body").attr("id");
            if ($(this).parents(".widget-body").find("img.praiseImg").attr("src") == '../img/zai.png') {
                //点赞
                var data = {
                    userId: getUserId(),
                    itemType: 19,
                    itemId: all_data[praiseIndex].id,
                    actionType: 2,
                    channel: 2
                }
                getServerData(url_commonoper_operAction + '?type=praise', data);
            } else {
                //取消点赞
                var data = {
                    userId: getUserId(),
                    itemId: all_data[praiseIndex].id,
                    actionType: 2
                }
                getServerData(url_oper_action_cancel + '?type=praise', data);
            }

        });

         //拍摄点击事件
        $("#imgpop").click(function () {
            $(".propbottom").show();
            $("#topProp").show();
        })
        $("#leftProp").click(function () {
                //农技视频
                $(".propbottom").hide();
            })
            $("#rightProp").click(function () {
                //小视频
                $(".propbottom").hide();
            })
            $("#topProp").click(function () {
                $(".propbottom").hide();
            })
    </script>
</body>

</html>